<script setup lang="ts">
import { ref } from 'vue';
import AuthBar from '@/components/authBar/index.vue';
import { dictVal2Text } from '@/utils/dict.utils';
import Steps from './components/steps.vue';

enum PRINT_TYPE {
  // 最新报告
  LATEST,
  // 历史报告
  HISTORY
}

const printTypes = ref([
  {
    label: '最新报告',
    value: PRINT_TYPE.LATEST
  },
  {
    label: '历史报告',
    value: PRINT_TYPE.HISTORY
  }
]);

const printType = ref(PRINT_TYPE.LATEST);

function onSelectPrintType(type: PRINT_TYPE) {
  printType.value = type;
}

enum TIME_RANGE {
  // 近一周
  WEEK,
  // 近一个月
  MONTH,
  // 近三个月
  THREE_MONTHS,
  // 近半年
  HALF_YEAR

}

// 时间快捷选择
const timeRange = ref(TIME_RANGE.WEEK);
const timeRangeOptions = ref([
  {
    label: '近一周',
    value: TIME_RANGE.WEEK
  },
  {
    label: '近一个月',
    value: TIME_RANGE.MONTH
  },
  {
    label: '近三个月',
    value: TIME_RANGE.THREE_MONTHS
  },
  {
    label: '近半年',
    value: TIME_RANGE.HALF_YEAR
  }
]);

const reportExpandKeys = ref([]);

function handleConfirm() {
  uni.navigateTo({
    url: '/pages/printService/reportPrint'
  });
}
</script>

<template>
  <view class="print-service flex-col">
    <Steps :current="2" />
    <AuthBar />
    <view class="flex-1 overflow-auto pb-45">
      <view class="print-service__title mt-50">
        选择报告
      </view>
      <view class="print-service__subtitle mt-16">
        您已选择:门诊清单, 检验报告, 病理报告
      </view>
      <view class="print-type mt-40 flex items-center justify-between">
        <view class="print-type__group flex items-center">
          <view
            v-for="item in printTypes" :key="item.value" class="print-type__item"
            :class="{ active: printType === item.value }" @click="onSelectPrintType(item.value)"
          >
            {{ item.label }}
          </view>
        </view>
        <view class="print-type__all">
          <view v-if="printType === PRINT_TYPE.LATEST">
            已展示最新报告数据
          </view>
          <view v-else class="flex items-center">
            时间筛选: <view class="time-range__picker">
              <wd-picker v-model="timeRange" :columns="timeRangeOptions" title="时间范围">
                <wd-input :placeholder="dictVal2Text(timeRange, timeRangeOptions)" readonly />
              </wd-picker>
              <view class="select-arrow">
                <wd-icon name="arrow-down" size="22px" color="var(--primary)" />
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="report-group">
        <view class="report-group__title flex items-center">
          <wd-checkbox shape="square" />
          全选
          <view class="group-select__count">
            已选择5份报告
          </view>
        </view>

        <view class="report-group__content">
          <wd-collapse v-model="reportExpandKeys">
            <wd-collapse-item v-for="item in 3" :key="item" name="item1">
              <template #title="{ expanded }">
                <view class="group-collapse__title flex items-center">
                  <view class="collapse-title__checkbox">
                    <wd-checkbox shape="square" />
                  </view>
                  <view class="collapse-title__content ml-26 flex-1">
                    <view class="collapse-title__content-name">
                      门诊清单
                    </view>
                    <view class="collapse-title__content-count">
                      2份报告
                    </view>
                  </view>
                  <view class="collapse-title__action">
                    <view class="text-right">
                      <wd-icon v-if="expanded" name="arrow-up" size="48px" />
                      <wd-icon v-else name="arrow-down" size="48px" />
                    </view>
                    <view class="collapse-title__action-tips">
                      已打印次数: 10次 | 可打印次数: 20次
                    </view>
                  </view>
                </view>
              </template>

              <view class="report-cell__group">
                <view v-for="cell in 2" :key="cell" class="report-cell">
                  <view class="report-cell__checkbox">
                    <wd-checkbox shape="square" />
                  </view>
                  <view class="report-cell__content ml-26">
                    <view class="cell-content__name">
                      门诊清单
                    </view>
                    <view class="cell-content__desc mt-20">
                      <view class="desc-item mr-27">
                        <i class="iconfont icon-a-lujing1" /> 陈可辛
                      </view>
                      <view class="desc-item">
                        <i class="iconfont icon-a-lujing2" /> 检验科
                      </view>
                    </view>
                  </view>
                  <view class="report-cell__action">
                    <view class="report-cell__date">
                      2025-08-26
                    </view>
                    <view class="report-cell__count mt-20 text-right">
                      5项
                    </view>
                  </view>
                </view>
              </view>
            </wd-collapse-item>
          </wd-collapse>
        </view>
      </view>

      <view class="flex-center">
        <view class="confirm-btn">
          <wd-button block @click="handleConfirm">
            确定选择
          </wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '报告打印',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.print-service {
  height: 100%;
  background-color: var(--bg-color);

  .print-service__title {
    font-size: 60px;
    font-weight: bold;
    color: var(--text-color);

    text-align: center;
  }

  .print-service__subtitle {
    color: var(--secondary-text-color);
    font-size: 28px;
    text-align: center;
  }

  .print-type {
    background: linear-gradient(180deg, #d8e7ff 40%, #afceff 100%);
    padding: 26px 46px;

    .print-type__group {
      .print-type__item {
        border-radius: 10px;
        background: rgba(247, 250, 254, 0.5);
        border: 2px solid rgba(255, 255, 255, 0.5);
        margin-right: 20px;
        font-size: 30px;
        padding: 13px 42px;

        &.active {
          background: #ffffff;
          color: var(--primary);
          font-weight: bold;
        }
      }
    }

    .print-type__all {
      font-size: 30px;
      color: var(--secondary-text-color);

      .time-range__picker {
        width: 257px;
        margin-left: 20px;
        --wot-input-inner-height: 68px;
        --wot-input-fs: 26px;
        position: relative;
        :deep(.wd-input) {
          border-radius: 8px;
          background: #fff;
          border: 1px solid #ffffff;
          box-sizing: border-box;
          padding-left: 20px;

          &:after {
            background: transparent;
          }
        }
        .select-arrow {
          position: absolute;
          right: 24px;
          top: 50%;
          transform: translateY(-50%);
        }
        :deep(.wd-picker) {
          .wd-picker__cell {
            border-radius: 8px;
          }
        }
      }
    }
  }

  .report-group {
    background: #e2ecfc;
    border-radius: 20px;
    margin: 24px 48px;
    padding: 34px 50px;
    .report-group__title {
      font-size: 30px;
      color: #1b1c1e;
      --wot-checkbox-label-fs: 24px;
      --wot-checkbox-size: 32px;
      --wot-checkbox-icon-size: 24px;
      --wot-checkbox-checked-color: var(--primary);
      :deep(.wd-checkbox) {
        .wd-checkbox__txt {
          line-height: 28px;
        }
      }
      .group-select__count {
        color: var(--secondary-text-color);
        font-size: 30px;
        margin-left: 20px;
      }
    }

    .report-group__content {
      margin-top: 30px;
      --wot-color-white: transparent;

      :deep(.wd-collapse-item) {
        background: #f5f9ff;
        border-radius: 20px;
        margin-top: 20px;
      }

      .group-collapse__title {
        padding: 43px 45px 45px 30px;
        .collapse-title__checkbox {
          --wot-checkbox-size: 82px;
          --wot-checkbox-square-radius: 20px;
          --wot-checkbox-checked-color: var(--primary);
          --wot-checkbox-check-color: #fff;
          --wot-checkbox-icon-size: 36px;
        }
        .collapse-title__content {
          .collapse-title__content-name {
            font-size: 36px;
            font-weight: bold;
            color: var(--text-color);
          }
          .collapse-title__content-count {
            font-size: 30px;
            color: #686869;
          }
        }

        .collapse-title__action {
          color: #8790a4;
          .collapse-title__action-tips {
            font-size: 26px;
            color: #686869;
          }
        }
      }
    }
  }

  .report-cell__group {
    .report-cell {
      padding: 0px 45px 0 30px;
      margin-bottom: 60px;
      @apply flex items-center;
      .report-cell__checkbox {
        --wot-checkbox-size: 82px;
        --wot-checkbox-square-radius: 20px;
        --wot-checkbox-checked-color: var(--primary);
        :deep(.wd-checkbox) {
          .wd-checkbox__txt {
            line-height: 28px;
          }
        }
      }
      .report-cell__content {
        flex: 1;
        .cell-content__name {
          font-size: 36px;
          font-weight: bold;
          color: var(--text-color);
        }

        .cell-content__desc {
          @apply flex items-center;
          color: #686869;
          font-size: 28px;
          .iconfont {
            color: #4a73b3;
            font-size: 24px;
          }
        }
      }

      .report-cell__action {
        .report-cell__date {
          font-size: 26px;
          color: var(--text-color);
        }

        .report-cell__count {
          font-size: 30px;
          color: #686869;
        }
      }
    }
  }

  .confirm-btn {
    width: 708px;
    --wot-button-medium-height: 124px;
    --wot-button-medium-fs: 42px;
    margin-top: 45px;

    :deep(.wd-button) {
      font-weight: bold;
    }
  }
}
</style>
